<template>
    <div>
        <el-card>
            <!--  -->
            <template #header>
                <div class="flex justify-between">
                    <div>{{ $route.meta.title }}</div>
                    <div>
                        <el-button type="primary" size="small" @click="handleEdit('add')">新增</el-button>
                    </div>
                </div>
            </template>
            <el-table :data="pageData.lists" v-loading="pageData.loading" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="username" label="管理员账号" width="180" />
                <el-table-column prop="nickname" label="管理员昵称" width="180"/>
                <el-table-column prop="status" label="状态" width="100" align="center"/>
                <el-table-column prop="role" label="管理员角色" width="180"/>
                <el-table-column prop="create_time" label="管理员创建时间" />
                <el-table-column fixed="right" label="管理员操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit('edit', scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-model:modelValue="pageData" @change="requestData" />
        </el-card>
        <EditComponent ref="editComponent"  @success="requestData" />

    </div>
</template>

<style scoped>
:deep(.el-table) {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-table__body-wrapper) {
    outline: none !important;
}

:deep(.el-table__body) {
    outline: none !important;
}

:deep(.el-table__inner-wrapper) {
    outline: none !important;
}

:deep(.el-table__inner-wrapper:focus) {
    outline: none !important;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import EditComponent from './components/edit.vue'
import { usePaging } from '@/utils/hooks/usePaging'
import { getAdminList } from '@/api/system/rbac/admin'
import { deleteAdmin } from '@/api/system/rbac/admin'
const { pageData, requestData } = usePaging({
    fetchFunc: getAdminList
})

onMounted(() => {
    requestData()
})
const showEditDialog = ref(false)
const editComponent = ref<InstanceType<typeof EditComponent>>()

const tableData = [
    {
        id: 1,
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        id: 2,
        name: 'Tom2',
        address: 'No. 189, Grove St, Los Angeles'
    },

]

const handleEdit = (type: 'edit' | 'add', row?: any) => {
    showEditDialog.value = true
    editComponent.value?.open(type)
    editComponent.value?.setFormData(row)
}

const handleDelete = async (row: any) => {
    // 处理删除逻辑

    const res = await deleteAdmin({ id: row.id })
    if (res.code === 200) {
        ElMessage.success('删除成功')
        requestData()
    }
}


const success = () => {
    alert(1)
}
</script>